<template>
  <div id="CashPledge">
    <div class="content">
      <div class="overflow-auto">
        <div class="CashPledge_table" :style="{ 'height': maxHeight + 'px' }">
          <el-table :data="tableData" height="250" style="width: 100%">
            <el-table-column prop="channel_room_title" label="房型名称" align="center">
            </el-table-column>
            <el-table-column prop="roomType" label="房型主题" align="center">
              <div>电竞房</div>
            </el-table-column>
            <el-table-column prop="channel" label="关联渠道" align="center">
              <div>微信小程序</div>
            </el-table-column>
            <el-table-column prop="押金金额" label="押金金额" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.deposit" style="width: 100px;" size="small"
                  @change="changeDeposit(scope.row)">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="是否收取押金" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.switch" @change="changeSwitch(scope.row)"></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CashPledge',
  components: {
  },
  data() {
    return {
      maxHeight: window.innerHeight - 100,//表格最大 高度
      tableKey: false,
      tableData: []
    }
  },
  created() {
    this.getChannel()
  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 移除窗口大小变化的监听
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    // 获取不同屏幕大小表格的最大高度
    handleResize() {
      this.maxHeight = window.innerHeight - 100
    },
    // 改变收取押金状态
    changeSwitch(row) {
      let data = {
        id: row.id
      }
      this.my_request('supplier/setting/deposit/status', data, 'PUT').then(res => {
        console.log(res, '改变收取押金状态结果');
        let { code } = res.data
        if (200 == code) {
          this.$message.success('操作成功！')
          this.getChannel()
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    // 修改押金
    changeDeposit(row) {
      let data = {
        id: row.id,
        deposit: row.deposit
      }
      console.log(data, '修改押金数据data');
      this.my_request('supplier/setting/deposit', data, 'PUT').then(res => {
        console.log(res, '修改押金结果');
        let { code } = res.data
        if (200 == code) {
          this.$message.success('修改成功！')
          this.getChannel()
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    // 获取渠道房源
    getChannel() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),//当前酒店id
        channel_id: 2
      }
      this.my_request("/supplier/hotel-pms-channel/list", data, "GET").then(res => {
        console.log(res, '获取渠道房源结果');
        let { code, data } = res.data
        if (200 == code) {
          this.tableData = data.list.filter(item => {
            item.switch = item.is_receive_deposit == 1 ? true : false//1收取，0不收取
            return item.room_id != 0
          })
          this.tableKey = !this.tableKey
          console.log(this.tableData, 'this.tableData');
        }
      })
    },
  }
}

</script>

<style lang="scss" scoped>
.content {
  .overflow-auto {
    width: calc(100% - 190px);
    height: calc(100% - 40px);
    padding: 20px;
    overflow: auto;

    .CashPledge_table {
      background-color: white;

      .top_btn {
        display: flex;
        flex-direction: row-reverse;
        margin-bottom: 50px;
      }

      width: 100%;
    }
  }
}
</style>